<template>
	<view class="page-view">
		<navBar title="备件申领"></navBar>
		<view class="bgfff mb-16rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>申请人
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-wrap-left mt-24rpx pb-32rpx text-view">
				<view class="w-60% flex-wrap-left">
					<label class="u-line-1">人员编码:{{userInfo.userId}}</label>
				</view>
				<!-- <view class="w-60% flex-wrap-left">
					<label class="u-line-1">人员编码:80000001</label>
				</view> -->
				<view class="w-40% flex-wrap-left">
					<label class="u-line-1">人员名称:{{userInfo.nickName}}</label>
				</view>
			</view>
		</view>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<sanCode :equpInfo="{}" :deviceCode="deviceCode" :isDisabled="false" :query-api="getEqupInspection" :data="'equpNo'" @confirmCode="confirmCode"></sanCode>
		</view>
		<view class="bgfff mb-120rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>选择备件
				</view>
			</view>
			<u-form :model="form" ref="formRef1" label-width="120rpx" label-align="right">
				<u-form-item label="备件编码:" prop="mate_code" :border-bottom="false">
					<u-input :disabled="true" v-model="form.mate_code" placeholder="请选择备件编码" @click="modalShow=true"/>
					<view class="flex-space-between input-choose" @click="modalShow=true;getTableInfo();">
						<text>选择</text>
						<image class="w-32rpx h-32rpx qr-img" src="@/static/ic_list_arrow.png" mode=""></image>
					</view>
				</u-form-item>
				<view class="pb-22rpx" v-if="form.applyList.length>0">
					<view class="flex-wrap-left mt-24rpx text-view" v-for="(item,index) in form.applyList" :key="index">
						<view class="w-60% flex-wrap-left">
							<label class="u-line-1">备件编码:{{item.spareNo}}</label>
						</view>
						<view class="w-40% flex-wrap-left">
							<label class="u-line-1">备件名称:{{item.spareName}}</label>
						</view>
						<view class="">
							
						</view>
						<u-form-item class="w-100%" label="申请数量:" :prop="`applyList.${index}.name`" :border-bottom="false">
							<u-input type="number" v-model="item.num" placeholder="请输入申请数量"/>
						</u-form-item>
					</view>
					
				</view>
				
				<u-form-item label="申请原因:" prop="reason" :border-bottom="false">
					<u-input v-model="form.reason" placeholder="请输入申请原因"/>
				</u-form-item>
			</u-form>
			<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx device-view">
				<textarea v-model="form.remark" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="备注:" />
			</view>
		</view>
		<view class="suctionbottom">
			<view class="yes button" @click="isSubmit && submitBtn()">
				提交
			</view>
		</view>
		<!-- 选择备件 -->
		<u-modal v-model="modalShow" width="702" :mask-close-able="true" :show-title="false" :show-confirm-button="false">
			<view class="modal-content">
				<view class="modal-search flex-space-between">
					<view class="search-left flex-wrap-left">
						<image class="w-48rpx h-48rpx  " src="@/static/nav_ic_search.png" mode=""></image>
						<u-input v-model="equpName" placeholder="请输入备件名称"/>
					</view>
					<text @click="getTableInfo">搜索</text>
				</view>
				<view class="tags-container">
					<view class="tags-item" v-for="(item,index) in checkedList" :key="index">
						<text class="text">{{  item.spareName }}</text>
						<img @click="handleDel(item.id)" class="img" src="https://image01.homedo.com/Files/Images/cms/www/20230720/4671644244862073255_pic1.png" alt="">
					</view>
				</view>
				<view class="content-view flex-left">
					<view class="w-100% con-table">
						<view class="w-100% h-88rpx flex-wrap-left t-header">
							<view class="w-20% t-th">
								<view class="w-100%" style="text-align: center;">
									<u-checkbox label='全选' v-model="isAllChecked" @change="allChoose"></u-checkbox>
								</view>
							</view>
							<view class="w-50% t-th">备件编号</view>
							<view class="w-30% t-th" style="text-align: right;">备件名称</view>
						</view>
						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="0" style="max-height:440rpx" @touchmove.stop> 
							<view class="t-content" v-if="dataList.items.length>0">
								<view>
									<view class="t-tr flex-wrap-left h-88rpx" v-for="item in dataList.items" :key="item.id">
										<view class="w-20% t-td" style="text-align: center;">
											<u-checkbox @change="checkboxChange" v-model="item.checked" :key="item.id"
															:name="item.id"></u-checkbox>
										</view>
										<view class="w-50% t-td u-line-1">{{ item.spareNo }}</view>
										<view class="w-30% t-td u-line-1" style="text-align: right;color:#2F7BFF">{{ item.spareName }}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="dataList.items.length === 0" class="flex-center mt-100rpx mb-100rpx">
					—— 暂无数据 ——
				</view>
				<view class="mt-16rpx flex-wrap-right content-footer">
					<view class="">
						已选择<text>{{checkedList.length}}</text>件
					</view>
					<view class="ml-16rpx submit-btn" @click="submitCheacked()">确定</view>
				</view>
			</view>
			
		</u-modal>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import sanCode from '@/components/deviceSanCode.vue'
import { getSelectSpareList,setSpareApply } from '@/common/api/equpManage'
import { getEqupInspection } from '@/common/api/keepPlan'
import { onReady } from "@dcloudio/uni-app"
import { ref, reactive,toRefs } from 'vue'
const deviceCode = ref<string>('');
const deviceShow = ref<boolean>(false);
const equpInfo = ref({
	selfNumbering:'',
	equipmentName:'',
	processDesc:''
});
const formRef1 = ref<any>();
const userInfo = ref({
	userId:'',
	nickName:''
});
onReady(()=> {
	userInfo.value = uni.getStorageSync('userInfo');
	formRef1.value.setRules(rules);
})
const confirmCode = (data)=>{
	deviceShow.value = true;
	equpInfo.value = data;
}
const form = reactive({
	mate_code:'',//备件编码
	// apply_qty:'',//申请数量
	reason:'',//申请原因
	remark:'',//备注
	applyList:[]
})

const rules = reactive({
	mate_code: [
			{
				required: true,
				message: '请选择备件编码',
				// 可以单个或者同时写两个触发验证方式
				trigger: 'blur,change'
			}
		],
	// apply_qty: [
	// 	{	
	// 		required: true,
	// 		message: '请输入需求数量',
	// 		// 可以单个或者同时写两个触发验证方式
	// 		trigger: 'blur,change'
	// 	},
	// 	{
	// 		// 自定义验证函数，见上说明
	// 		validator: (rule, value, callback) => {
	// 			// 上面有说，返回true表示校验通过，返回false表示不通过
	// 			// this.$u.test.mobile()就是返回true或者false的
	// 			return uni.$u.test.digits(value);
	// 		},
	// 		message: '请输入正确需求数量',
	// 		// 触发器可以同时用blur和change
	// 		trigger: ['change','blur'],
	// 	}
	// ],
	// reason: [
	// 	{	
	// 		required: true,
	// 		message: '请说明原因',
	// 		trigger: 'blur,change'
	// 	}
	// ]
})

const modalShow = ref<boolean>(false);
let dataList = reactive({
	items:[]
});
const equpName = ref('');
const checkedList = ref<any>([])
getTableInfo();
async function getTableInfo(): Promise<void> {
	const data = await getSelectSpareList({
		name: equpName.value,
	})
	dataList.items = data;
	dataList.items.forEach((item)=>{
		checkedList.value.forEach((item1)=>{
			if(item.id == item1.id) {
				item.checked = true
			}								
		})
	})
}
const checkboxChange = (e:any)=> {
	dataList.items.map(val => {
		if (val.id === e.name) {
			val.checked = e.value;
			if(e.value){
				checkedList.value.push(val);
			}else{
				checkedList.value = checkedList.value.filter(function(cur) {return cur.id !== val.id});
			}
		}
	})
	let allSelected = dataList.items.every(item => item.checked === true);
	if(allSelected){
		isAllChecked.value = true;
	}else{
		isAllChecked.value = false;
	}
	// checkedDispose()

}
const isAllChecked = ref<boolean>(false)
const allChoose = ()=> {
	isAllChecked.value = !isAllChecked.value
	checkedAll(isAllChecked.value)
}
// 全选
const checkedAll = (e:any)=> {
	dataList.items.map(val => {
		val.checked = e;
	})
	checkedDispose()
}

const checkedDispose = ()=> {
	checkedList.value = dataList.items.filter(item => item.checked);//已选择数据
	//全选联动
	if(checkedList.value.length == dataList.items.length){
		isAllChecked.value = true;
	}else{
		isAllChecked.value = false;
	}
}
//选择提交
const cheackDataCode = ref<any>([]);
const handleDel = (id:number)=>{
	checkedList.value = checkedList.value.filter(function(cur) {return cur.id !== id});
	dataList.items.forEach((item)=>{
		if(item.id == id) {
			item.checked = false;
		}
	})
	// 是否全部选中
	let allSelected = dataList.items.every(item => item.checked === true);
	if (allSelected){
		isAllChecked.value = true;
	}else{
		isAllChecked.value = false;
	}
}
const submitCheacked = ()=>{
	if(checkedList.value.length==0){
		uni.showToast({
			title: '请选择数据',
			icon: 'none',
		});
		return
	}
	// if(checkedList.value.length>5){
	// 	uni.showToast({
	// 		title: '最多只能选5个备件',
	// 		icon: 'none',
	// 	});
	// 	return
	// }
	//取出未添加的数据进行添加
	let diffArr = checkedList.value.filter(v => {
	    return form.applyList.every(e => e.spareId != v.id);
	});
	
	diffArr.map(item=>{
		form.applyList.push({
			"num": '',
			"spareId": item.id,
			"spareName": item.spareName,
			"spareNo": item.spareNo,
			"spareNum": item.spareNum
		})
	});
	//取出删除的数据
	let delArr = form.applyList.filter((x) =>  {
		return checkedList.value.every(e => x.spareId != e.id)
		});
	delArr.forEach((item=>{
		let idx = form.applyList.findIndex(f=>f.spareId == item.spareId);
		form.applyList.splice(idx,1)
	}))
	cheackDataCode.value = form.applyList.map((res)=>{
		return res.spareNo
	})
	form.mate_code = cheackDataCode.value.join(',');
	equpName.value = '';
	modalShow.value = false;
}
const isSubmit = ref(true);
const submitBtn = () => {
	if(!equpInfo.value.selfNumbering){
		uni.showToast({
			title: "请输入设备条码",
			icon: 'none'
		});
		return
	}
	formRef1.value.validate(valid => {
		if (valid) {
			
			//申请数量为空
			let isNum = form.applyList.find(item=> !item.num);
			// 申请数量大于备件数量
			let isNumOver = form.applyList.find(item=> item.num>item.spareNum);
			if(isNum){
				uni.showToast({
					title: "请输入申请数量",
					icon: 'none'
				});
				return
			}
			if(isNumOver){
				uni.showToast({
					title: '备件{{'+isNumOver.spareName+"}}申请数量不可大于备件数量",
					icon: 'none'
				});
				return
			}
			if(!form.reason){
				uni.showToast({
					title: "请输入申请原因",
					icon: 'none'
				});
				return
			}
			let params = {
				reason:form.reason,
				remark:form.remark,
				applyList:[],
				applyId:userInfo.value.userId,
			    applyName: userInfo.value.nickName,
			    equpCode: equpInfo.value.selfNumbering,
			    equpName: equpInfo.value.equipmentName,
			    processDesc: equpInfo.value.processDesc,
			}
			form.applyList.forEach(item=>{
				params.applyList.push({
					"num":Number(item.num),
					"spareId":item.spareId,
					"spareName":item.spareName,
					"spareNo":item.spareNo,
					"spareNum":item.spareNum
				})
			})
			isSubmit.value = false;
			setSpareApply(params).then(res=>{
				isSubmit.value = true;
				if(res.code === 2000){
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					uni.redirectTo({
						url: '/pages/homePage/index',
					});
				}
			})
		}
	});
}

</script>

<style lang="scss" scoped>
	.page-view{
		height: 100%;
		overflow-y: auto;
	}
	.bgfff{
		background-color: #fff;
	}
	.navigation-little-title {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0F1F2D;
		line-height: 28rpx;
	}
	uni-textarea{
		width: 654rpx;
		height: 118rpx;
	}
	::v-deep .uni-textarea-placeholder{
		// z-index: 9;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CACACA;
		padding: 20rpx;
	}
	::v-deep .uni-textarea-textarea{
		width: 654rpx;
		height: 118rpx;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.uni-textarea-wrapper{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.form-input{
		width: calc(100% - 120rpx);
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 0 24rpx;
		position: relative;
		.uni-input-form{
			font-size: 24rpx;
			
		}
		.uni-input-placeholder{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CACACA;
		}
		.qr-img,.date-text{
			position: absolute;
			top: 22rpx;
			right: 24rpx;
		}
		.date-text{
			color: #2F7BFF;
		}
	}
	.text-view1{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
	}
	.text-view{
		margin-left: 48rpx;
		margin-right: 48rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		::v-deep .u-form-item__body{
			padding: 0;
		}
	}
	.suctionbottom .button {
		width: 100%;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}
	.suctionbottom .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}
	::v-deep .u-form-item__body{
		padding: 0 48rpx;
	}
	::v-deep .u-form-item--left__content{
		&:after{
			content:'';
			width:16rpx;
			height: 16rpx;
			background-image: url('@/static/icon_star.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: absolute;
			left: -8rpx;
			top: 30%;
		}
		.u-form-item--left__content__label{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
		}
		
	}
	::v-deep .u-form-item--right__content{
		height: 88rpx;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding-left: 24rpx;
		padding-right: 20rpx;
		.uni-input-placeholder{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CACACA;
		}
		.input-choose{
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #2F7BFF;
			}
		}
	}
	::v-deep .u-form-item__message{
		padding-left:168rpx !important;
		display: none;
	}
	::v-deep .u-drawer-content{
		top:auto;
		bottom: 69rpx;
		.u-mode-center-box{
			// border-radius: 16rpx !important;
		}
	}
	.modal-content{
		padding: 24rpx;
		.modal-search{
			height: 88rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			padding: 16rpx;
			margin-bottom: 10rpx;
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2F7BFF;
			}
			.search-left{
				width: calc(100% - 66rpx);
				background-color: #fff;
				border-radius: 6rpx;
				border: 1rpx solid #EEEEEE;
				::v-deep .u-input__input{
					font-size: 24rpx;
				}
				::v-deep .uni-input-placeholder{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #7D7F88 !important;
				}
			}
		}
		
		.redColor {
			color: #E52B2B !important;
		}
		.t-header{
			border-right: 1rpx solid rgba(0,0,0,0.12);
			.t-th {
				font-size: 26rpx !important;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
				background-color: #f7f7f7;
				padding: 0rpx 20rpx !important;
				height: 88rpx;
				line-height: 88rpx;
				background: #F7F7F7;
				border: 1rpx solid rgba(0,0,0,0.12);
				border-right: 0;
			}
		}
		.t-content{
			.t-tr{
				border-right: 1rpx solid rgba(0,0,0,0.12);
				.t-td {
					font-size: 24rpx !important;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000;
					line-height: 36rpx;
					background-color: #fff;
					height: 88rpx;
					line-height: 88rpx;
					padding: 0rpx 20rpx !important;
					border: 1rpx solid rgba(0,0,0,0.12);
					border-right: 0;
					border-top: 0;
				}
			}
		}
		
		
		.selection-view .u-td,.selection-view .u-th{
			border-right: 0 !important;
			// border-bottom: 1rpx solid rgba(0,0,0,0.12) !important;
		}
		
		.u-checkbox-group {
			width: 100%;
		}
		
		.u-tr {
			width: 100%;
		}
		
		.u-checkbox,
		.u-radio {
			width: 34rpx !important;
			height: 34rpx !important;
		}
		
		.u-radio-group {
			width: 54rpx;
			display: flex;
			justify-content: center;
		}
		
		.interaction>.u-td {
			background-color: #f5f5f5;
		}
		
		
		::v-deep .u-table {
			border-left: 1px solid rgba(0,0,0,0.12) !important;
		}
		.table-tr-group{
			height: 440rpx;
			overflow-y: auto;
		}
		.content-footer{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.85);
			
			text{
				color: #2F7BFF;
			}
			.submit-btn{
				width: 112rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #2F7BFF;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.item-view{
		margin:24rpx 48rpx 38rpx 48rpx ;
		label{
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			line-height: 32rpx;
		}
		.form-input{
			width: calc(100% - 120rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 0 24rpx;
			position: relative;
			.uni-input-form{
				font-size: 24rpx;
				
			}
			.uni-input-placeholder{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
			.qr-img,.date-text{
				position: absolute;
				top: 22rpx;
				right: 24rpx;
			}
			.date-text{
				color: #2F7BFF;
			}
		}
	}
	.tags-container {
		// width: 654rpx;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		margin-left: -16rpx;
		// .tags-item:not(:first-child){
		// 	margin-left: 16rpx;
		// }

		.tags-item {
			text-align: center;
			width: fit-content;
			height: auto;
			background: rgba(47,123,255,0.08);
			border-radius: 4rpx;
			border: 1rpx solid #2F7BFF;
			padding-top: 0rpx;
			padding-bottom: 6rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			margin-bottom: 16rpx;
			position: relative;
			margin-left: 16rpx;
			.text {
				font-size: 26rpx;
				font-weight: 400;
				color: #2F7BFF;
			}
			.img {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}
		.tags-item:not(:last-child) {
			margin-left: 16rpx;
		}
	}
</style>
